<template>
	<div class="index">

		<div class="center">
			<left></left>
			<div class="right">
          <top></top>
          <div class="hei10"></div>


        <div class="flex" style="padding: 20px;">
          <el-input size="medium" style="width: 180px;" v-model="search.id" placeholder="订单号"></el-input>
          <el-input size="medium" style="width: 180px;" v-model="search.address_mobile" placeholder="收货手机号"></el-input>

          <el-select v-model="search.status" clearable placeholder="请选择订单状态">
          	<el-option :label="item.label" :value="item.value" v-for="(item,index) in peizhis.order_status" :key="index"></el-option>
          </el-select>
          <el-select v-model="search.refund_status" clearable placeholder="请选择订单状态">
          	<el-option :label="item.label" :value="item.value" v-for="(item,index) in peizhis.refund_status" :key="index"></el-option>
          </el-select>
          <el-button type="primary" size="medium" @click="searchs">搜索</el-button>
        </div>
        <div class="flex" style="padding:0 20px;display: flex;">
          <upload-excel-component @on-selected-file="exportData" size="medium" class="btnp" buttonName="按导入号码退款">
          </upload-excel-component>
          <el-button @click="xiazai1" type="text" size="medium">下载导入退款订单模板</el-button>
        </div>
        <div class="cons" v-loading="loading">
          <el-table :data="list" border style="width: 100%">
            <el-table-column align='center' prop='id' label="订单号"></el-table-column>
            <el-table-column align='center' prop='product_sku' label="商品名称"></el-table-column>

            <el-table-column align='center' prop='address_mobile' label="收货号码"></el-table-column>
            <el-table-column align='center' label="退款状态">
              <template slot-scope="scope">
                <span v-if="scope.row.refund_status == 100">未申请退款</span>
                <span v-if="scope.row.refund_status == 200">用户申请退款</span>
                <span v-if="scope.row.refund_status == 300">已退款</span>
                <span v-if="scope.row.refund_status == 400">已拒绝退款</span>
              </template>
            </el-table-column>
            <el-table-column align='center' label="订单状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == -100">待支付</span>
                <span v-if="scope.row.status == 100">已支付</span>
                <span v-if="scope.row.status == 101">待解密</span>
                <span v-if="scope.row.status == 110">刷单拦截</span>
                <span v-if="scope.row.status == 120">初步审核</span>
                <span v-if="scope.row.status == 150">待完善证件信息</span>
                <span v-if="scope.row.status == 200">待审核</span>
                <span v-if="scope.row.status == 450">待开卡</span>
                <span v-if="scope.row.status == 460">已领取</span>
                <span v-if="scope.row.status == 470">开卡中</span>
                <span v-if="scope.row.status == 500">待发货</span>
                <span v-if="scope.row.status == 550">已发货</span>
                <span v-if="scope.row.status == -700">已退货</span>
                <span v-if="scope.row.status == 5000">已激活</span>
                <span v-if="scope.row.status == -460">开卡失败</span>
                <span v-if="scope.row.status == -200">证件不合格待重传</span>
                <span v-if="scope.row.status == 0">订单终止</span>
              </template>
            </el-table-column>
            <el-table-column align='center' label="操作" width="240">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="status2(scope.row.id)" v-if="scope.row.refund_status == 200">
                  拒绝退款</el-button>
                <el-button type="success" size="mini" @click="status(scope.row.id)" v-if="scope.row.refund_status == 200">
                  同意退款</el-button>
                  <el-button type="success" size="mini" @click="status3(scope.row.id)" v-if="scope.row.refund_status == 100">
                    直接退款</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align:center;margin-top:30px">
            <el-pagination background layout="total,prev, pager, next" :current-page="search.page" @current-change="fanye"
              :page-size="search.pagesize" :total="total"></el-pagination>
          </div>
        </div>
        <el-dialog title="导入失败" :visible.sync="log" width="440px">
          <div v-for="(item,index) in shibailist" :key="index">{{item}}</div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="log = false">知道了</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
    <!-- <foot></foot> -->
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import UploadExcelComponent from "@/components/UploadExcel/index.vue";
  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      UploadExcelComponent
    },
    name: 'message',
    data() {
      return {
        list: [],
        total: 0,

        loading: true,
        nodonum1: "",
        nodonum2: "",
        nodonum3: "",


        danxuans: [],
        quanxuana: false,
        quanxuans: [],
        shibailist: "",
        log: false,
        search: {
          pagesize: 20,
          page: 1,
          id: "",
          address_mobile: "",
          status: "",
          refund_status: ""
        }
      }
    },
    created() {
      this.getlist()

    },
    methods: {
      searchs: function() {
        this.page = 1
        this.getlist()
      },
      xiazai1: function() {
        const a = document.createElement('a');
        a.setAttribute('download', '导入退款订单模板.xlsx');
        a.setAttribute('href', this.allurl + 'static/moban/xiaofengchetuikuan.xlsx');
        a.click();
      },
      exportData: function(data) {
        var that = this;
        var list = []

        if (data.header[0] == "退款订单") {
          for (let m in data.results) {
            let num = (data.results[m]['退款订单']).toString().trim()

            list.push(num)
          }

          axios.post("/api/plan-market/address/mobile/refundsDo", {
              ids: list
            })
            .then((response) => {
              if (response.data.msg.code == 0) {
                if (response.data.data.error && response.data.data.error != '') {
                  this.shibailist = response.data.data.error
                  this.log = true
                } else {
                  this.$message.success('已导入退款订单');
                  this.getlist()
                }
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        }



      },
      getlist: function() {
        var that = this
        axios.get('/api/plan-market/fengche/orders',{
          params:this.search
        })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.list = response.data.data.data
              that.total = response.data.data.total
              // that.nodonum1 = response.data.data.undealed_count
              // that.ids()
              that.loading = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.search.page = page
        this.getlist()
      },
      status2: function(id) {
        this.$prompt('确定拒绝退款吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({
          value
        }) => {
          axios.post('/api/plan-market/address/mobile/refundNo', {
              id: id,
              reason: value
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('已拒绝退款');
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })

      },
      status3: function(id) {
        this.$prompt('确定直接退款吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({
          value
        }) => {
          axios.post('/api/plan-market/address/mobile/refundsDo', {
              ids: [id],
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                if (response.data.data.error && response.data.data.error != '') {
                  this.shibailist = response.data.data.error
                  this.log = true
                } else {
                  this.$message.success('已退款');
                  this.getlist()
                }
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })

      },
      status: function(id) {
        this.$confirm('确定同意退款吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/address/mobile/refundDo', {
              id: id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                this.$message.success('已同意退款');
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })

      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  .index {


    /deep/ .el-button--primary {
      background-color: #EEF7FF;
      color: #fff;
      border: 0;
      margin: 0 10px;
    }

    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      width: 640px;
    }

    .powertopli {
      flex-basis: 160px;
      line-height: 45px;
      border-top: 4px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #EAEAEA solid;
      font-size: 14px;
      text-align: center;
    }

    .powertopact {
      background: #FFFFFF;
      border-top: 4px #DD2727 solid;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #EFEFEF
    }

    .cons {
      border: 0px;
      margin: 20px;

      .list {
        display: flex;
        color: #727272;
        line-height: 45px;
        margin: 0 20px;
        border-bottom: 1px #EAEAEA solid;
        margin-top: -1px;

        .td {
          font-size: 14px;

          .chuli {
            padding: 0 10px;
          }
        }

        .td:nth-child(1) {
          flex-basis: 100px;
        }

        .td:nth-child(2) {
          flex-basis: 600px;
        }

        .td:nth-child(3) {
          flex-basis: 180px;
        }

        .td:nth-child(4) {
          flex-basis: 220px;
          text-align: right;
        }
      }

      .el-pagination {
        text-align: right;
        margin: 20px 0
      }

      .act {
        color: #000;

        .el-icon-message-solid {
          color: #EEF7FF
        }
      }

      .no {
        color: #999;
      }
    }

  }
</style>
